<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态生成style</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="box">
        <!-- 给style动态绑定,传入一个对象 -->
        <div :style="styleObj">我可以动态生成style</div>
        <div :style="styleArr" @click="handleClick">我可以动态生成style</div>
    </div>
    <script>
        let num =30;
        let color = "green";
        let obj = {
            data(){
                return {
                    // 动态生成style vue3可以动态进行拦截,实现动态添加,vue2不能拦截,无法实现
                    //可以为一个对象
                    styleObj :{
                        // 变量名支持大驼峰写法,不加引号可以自动识别为style属性,但是不能有特殊符号,值可以是变量,也可以是具体值
                        fontSize : `${num}px`,
                        // 如果不想使用大驼峰写法,需要带上引号
                        'background-color' :'yellow',
                        color : color,
                    },
                    // 也可以传入一个数组
                    styleArr:[
                        {
                            width:'300px',
                            height:'200px',
                        },{
                            backgroundColor:'black',
                            color:'white',
                        }
                    ]
                }

            },
            methods: {
                handleClick(){
                    // 如果后面传入的style样式有和前面冲突的,后加入进来style样式的生效
                    this.styleArr.push({
                        width:'200px',
                        height:'200px',
                    })
                }
            },
        }
        let app = Vue.createApp(obj).mount('#box')
    </script>
</body>
</html>